/**
 * Contract Monitoring Dashboard Component (Simple Version)
 * Displays basic monitoring information for contract updates
 */

import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { 
  Shield, 
  AlertTriangle, 
  CheckCircle, 
  Clock, 
  Activity, 
  Wallet, 
  AlertCircle,
  RefreshCw,
  Eye
} from 'lucide-react';

const ContractMonitoringDashboard: React.FC = () => {
  const [selectedLevel, setSelectedLevel] = useState<string>('');

  // Mock data for demonstration
  const healthData = {
    status: 'healthy',
    last_check: new Date().toISOString(),
    contracts_monitored: 4,
    alerts_count: 0,
    uptime: '99.9%'
  };

  const alertsData = [
    {
      id: 1,
      level: 'info',
      message: 'Contract monitoring system is online',
      timestamp: new Date().toISOString(),
      contract_name: 'system'
    }
  ];

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'healthy': return 'text-green-600';
      case 'warning': return 'text-yellow-600';
      case 'error': return 'text-red-600';
      default: return 'text-gray-600';
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'healthy': return CheckCircle;
      case 'warning': return AlertTriangle;
      case 'error': return AlertCircle;
      default: return Clock;
    }
  };

  const getAlertBadge = (level: string) => {
    const configs = {
      info: { color: 'bg-blue-100 text-blue-800', label: 'INFO' },
      warning: { color: 'bg-yellow-100 text-yellow-800', label: 'WARNING' },
      error: { color: 'bg-red-100 text-red-800', label: 'ERROR' }
    };
    
    const config = configs[level as keyof typeof configs] || configs.info;
    return (
      <span className={`px-2 py-1 rounded text-xs font-medium ${config.color}`}>
        {config.label}
      </span>
    );
  };

  return (
    <div className="space-y-6">
      {/* Health Status */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="w-5 h-5" />
            System Health
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div className="text-center">
              <div className={`text-2xl font-bold ${getStatusColor(healthData.status)}`}>
                {healthData.status.toUpperCase()}
              </div>
              <div className="text-sm text-gray-600">Overall Status</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-blue-600">
                {healthData.contracts_monitored}
              </div>
              <div className="text-sm text-gray-600">Contracts Monitored</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-green-600">
                {healthData.uptime}
              </div>
              <div className="text-sm text-gray-600">Uptime</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-yellow-600">
                {healthData.alerts_count}
              </div>
              <div className="text-sm text-gray-600">Active Alerts</div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Alerts */}
      <Card>
        <CardHeader>
          <div className="flex justify-between items-center">
            <CardTitle className="flex items-center gap-2">
              <AlertTriangle className="w-5 h-5" />
              System Alerts
            </CardTitle>
            <div className="flex items-center gap-2">
              <select
                value={selectedLevel}
                onChange={(e) => setSelectedLevel(e.target.value)}
                className="px-3 py-1 border rounded-md text-sm"
              >
                <option value="">All Levels</option>
                <option value="info">Info</option>
                <option value="warning">Warning</option>
                <option value="error">Error</option>
              </select>
              <Button variant="outline" size="sm">
                <RefreshCw className="w-4 h-4 mr-2" />
                Refresh
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {alertsData.map((alert) => (
              <div key={alert.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div className="flex items-center gap-3">
                  <div className="flex items-center gap-2">
                    {getAlertBadge(alert.level)}
                    <span className="font-medium">{alert.contract_name}</span>
                  </div>
                  <div className="text-sm text-gray-600">{alert.message}</div>
                </div>
                <div className="text-right">
                  <div className="text-xs text-gray-500">
                    {new Date(alert.timestamp).toLocaleString()}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Wallet Status */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Wallet className="w-5 h-5" />
            Admin Wallet Status
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <Alert>
              <Shield className="h-4 w-4" />
              <AlertDescription>
                <strong>Multi-signature wallet</strong> is active and monitoring contract updates.
                All critical operations require multiple confirmations.
              </AlertDescription>
            </Alert>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="p-4 bg-green-50 rounded-lg">
                <div className="text-sm font-medium text-green-800">
                  Wallet Balance
                </div>
                <div className="text-2xl font-bold text-green-600">
                  Available
                </div>
              </div>
              <div className="p-4 bg-blue-50 rounded-lg">
                <div className="text-sm font-medium text-blue-800">
                  Gas Optimization
                </div>
                <div className="text-2xl font-bold text-blue-600">
                  Active
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default ContractMonitoringDashboard;